<template>
  <div class="intemShow">


<!--    用户数据表-->
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column fixed prop="id" label="id" width="100" sortable align="center"></el-table-column>
      <el-table-column prop="username" label="用户名称" width="370" align="center"></el-table-column>
      <el-table-column prop="phone" label="用户电话" width="370" align="center"></el-table-column>
      <el-table-column prop="loginrole" label="用户状态" width="370" align="center"></el-table-column>

      <el-table-column fixed="right" label="操作" width="370"  align="center">
        <template v-slot="scope">
          <el-button @click="open(scope.row.id)" type="check" size="default">开启登录权限 <el-icon><check /></el-icon></el-button>
          <el-button @click="close(scope.row.id)" type="danger" size="default">关闭登陆权限<el-icon><remove /></el-icon></el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    <el-config-provider :locale="locale">-->
<!--      <div style="padding: 10px 0">-->
<!--        <el-pagination-->
<!--            background-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--            v-model:currentPage="pageNum"-->
<!--            :page-sizes="[5, 15, 50, 100]"-->
<!--            v-model:page-size="pageSize"-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            :total="total">-->
<!--        </el-pagination>-->
<!--      </div>-->
<!--    </el-config-provider>-->

    <!--    弹窗信息-->

<!--    <el-dialog title="物品信息" v-model="dialogFormVisible" width="50%">-->
<!--      <el-form :model="form" size="medium" :rules="rules" ref="form">-->
<!--        <el-form-item label="ID" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.id" autocomplete="off" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="物品编号" :label-width="formLabelWidth" prop="itemId">-->
<!--          <el-input v-model="form.itemId" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="物品名称" :label-width="formLabelWidth" prop="name">-->
<!--          <el-input v-model="form.name" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="物品类型" :label-width="formLabelWidth" prop="typeid">-->
<!--          &lt;!&ndash;          <el-input v-model="form.typeid" autocomplete="off"></el-input>&ndash;&gt;-->
<!--          <el-select-->
<!--              style="margin-left: 5px"-->
<!--              v-model="form.typeid"-->
<!--              filterable-->
<!--              allow-create-->
<!--              default-first-option-->
<!--              :reserve-keyword="false"-->
<!--              placeholder="请输入或选择类型"-->
<!--          >-->
<!--            <el-option-->
<!--                v-for="item in typeForm"-->
<!--                :key="item.typeId"-->
<!--                :label="item.typename"-->
<!--                :value="item.typeId"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="规格" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.size" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="数量" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.itemCount" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="备注" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.description" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->

<!--      <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false"> 取消</el-button>-->
<!--        <el-button type="primary" @click="saveData('form')"> 确认</el-button>-->
<!--      </span>-->
<!--      </template>-->


<!--    </el-dialog>-->

  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "index",
  data(){
    return {
      tableData: '',
      id:''
    }
  },
  methods:{
    findAllUser(){
      this.$http.get("/user/userAll").then(res=>{
        if(res.statusCode == '200'){
          console.log(res.data)
          this.tableData=res.data
          ElMessage({
            message: '所有用户查询成功！',
            type: 'success',
          })
        }else {
          ElMessage.error('查询失败！')
        }
      }).catch(()=>{
        ElMessage.error('查询失败！')
      })
    },
    open(id){
      this.id=id
      this.$http.post("/user/open_role",this.id).then(res=>{
        if(res.statusCode=='200'){
          ElMessage({
            message: '开启权限成功！',
            type: 'success',
          })
          this.findAllUser();
        }else {
          ElMessage.error('开启失败！')
        }
      }).catch(()=>{
        ElMessage.error('开启失败！')
      })
    },
    close(id){
      this.id=id
      this.$http.post("/user/close_role",this.id).then(res=>{
        if(res.statusCode=='200'){
          ElMessage({
            message: '关闭权限成功！',
            type: 'success',
          })
          this.findAllUser();
        }else {
          ElMessage.error('关闭失败！')
        }
      }).catch(()=>{
        ElMessage.error('关闭失败！')
      })
    }


  },
  created() {
    this.findAllUser()
  }
}
</script>

<style scoped>

</style>
